#calendar {
    background: white;
    padding:0 20px;      
    .queryPanel{
        height:72px;
        display: flex;
        align-items: center;
        >ul{
            display: flex;
            >li{
                display: flex;
                align-items: center;
                white-space:nowrap;
                margin-right: 20px;
                .search{
                    background: #ffb700;
                    color:white;
                    width:80px;
                    height:30px;
                    line-height: 100%;
                    border:none;
                }
            }
        }
    }
    .calendarPanel{
        margin-bottom: 20px;
        
        >.changePage{
            width:40px;
            height:40px;
            background: #606060;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.5s;
            opacity: 0.5;
            position: fixed;
            top:50%;
            &.prev{
                left:-10px;
            }
            &.next{
                right:-10px;
            }
            &:hover{
                transform: scale(1.5);
                opacity: 1;
            }
            &.prev:hover{
                left:10px;
            }
            &.next:hover{
                right:10px;
            }
            .iconfont{
                color:white;
                font-size: 20px;
            }
        }
        >table{
            border-collapse: collapse;           
            width:100%;           
            .weeks{
                color:white;
                background: #565960;
                height:40px;
                th{
                    font-weight: normal;
                    border:1px solid #cdcdcd;
                }
            }
            td{
                height:124px;               
                padding:1px;   
                border:1px solid #cdcdcd;
                min-height:145px;
                 
                >div{
                    height:100%;
                    display: flex;
                    flex-direction: column;
                }             
                .dayTop{
                    padding:0 15px; 
                    display: flex;
                    justify-content: space-between;
                    background: #e9e9e9;
                    height:32px;
                    align-items: center;
                    .hao{
                        font-size: 14px;
                        margin-right: 10px;
                    }
                    
                }
                .dayData{
                    flex:1;
                    padding:10px 15px; 
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .iconfont{
                        margin-right: 5px;
                    }
                }
                .dayMain:hover{
                    cursor: pointer; 
                    box-shadow: 0 0 15px 5px #dcdcdc;
                }
            }
        }
        
    }
    .tendencyPanel{
        width:100%;
        border:1px solid #cdcdcd;
        .title{
            padding:0 20px;
            background: #f5f5f5;
            height:36px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #cecece;
            .iconfont{
                margin-right: 15px;
                font-size: 16px;
            }
        }
        .tendency{
            height:460px;
            margin:50px 0;
        }
    }
}
